<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>文件上传功能</title>
        <meta charset="utf-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="chen" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1" />
        <!--
            <link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">
        -->
        <link rel="stylesheet" type="text/css" media="screen" href="" />
        <script defer="defer" src=""></script>
        <style>
            /*@import url("css/name.css") screen and ( min-width: 1200px );*/
            div {
                width: 200px;
                height: 200px;
                background-color: green;
            }
            p {
                background-color: red;
                height: 5px;
            }
        </style>
    </head>

    <body>
        <p></p>
        <input type="file" />
        <div></div>
        <script>
            // 为了实现文件上传
            // 1. 使用 <input type='file'> file 控件的方式
            //		可以使用label for id 建立关系, 吧input放到看不见的位置, 美化界面
            // 2. 使用H5的拖拽文件功能

			const ipt = document.querySelector("input");

        // ajax文件上传功能 - 按钮响应
            ipt.onchange = function() {
                console.log(this.value);		// 输入框会获取到文件名, 通过this.value读取
                if (this.value) {				// 如果存在文件
                    console.log(this.files[0]);	// 这个可以读取选取的文件信息
                    let oFile = this.files[0];
                    uploadFiles(oFile);
                }
            };

        // ajax文件上传功能 - H5拖拽响应
            let div = document.querySelector("div");

            // 阻止默认拖拽事件
            div.addEventListener("dragover", function(e) {
				// 阻止默认事件代码
				e.preventDefault();
				e.stopPropagation();
				return false;
            });

            div.addEventListener("drop", function(e) {
                const dtfile = e.dataTransfer.files[0];
                uploadFiles(dtfile);
                // 阻止默认事件
                e.preventDefault();
                e.stopPropagation();
                return false;
            });

        // ajax文件上传功能 - 实时进度
            const p = document.querySelector("p");
            // const xhr = new XMLHttpRequest(); 前面已经声明过
            xhr.upload.onprogress = function(e) {
                const scale = e.loaded / e.total;   // 计算上传数据占总数据比例
                p.style.width = scale * window.innerWidth + "px";   // 以P元素的宽度显示出来
            };

        // ajax文件上传功能 - 发送数据到服务器
            const xhr = new XMLHttpRequest();
            // xhr.open('post', '请求路径(服务器路径)', true);
            xhr.open("post", "http://47.100.98.54/20ajax/server.php", true);

            // 要通过FormData对象携带数据
            const FD = new FormData();
            FD.append("file", oFile);   // file命名随意, 对应服务端
            xhr.send(FD);               // 将文件发送到服务器

        // 之前学习的读取图片文件加载到网页中的方法
            function uploadFiles(file) {
                let blob = new Blob([file]);
                let url = window.URL.createObjectURL(blob);
                let img = new Image();
                img.src = url;
                img.onload = function() {
                    document.body.appendChild(this);
                };
            }
        </script>
    </body>
</html>
